<template>
    <div class="md-container">
        <div class="leftRight xxl-hiden">
            <span class="cu-hand" :class="{'active':!leftOrRight}" @click="moveItem('left')">◀ </span>
            <span class="cu-hand" :class="{'active':leftOrRight}" @click="moveItem()">▶ </span>
        </div>
        <div class="row">
            <div class="col-4 large">
                <div class="card">
                    <div class="img-title">
                        <span class="pack_p_rb">02-21期</span>
                        <img class="card-img-top cu-hand img-scale" src="https://liangcang-material.alicdn.com/prod/upload/0a5a791c474543ac9caa3530489024db.gif" alt="Card image cap">
                    </div>
                    <div class="info_list">
                        <a class="text-truncate cu-text-blue">王牌对王牌5·神操作!</a>
                        <a class="text-truncate subhead">沈腾戴浴帽淋浴秒变大妈</a>
                    </div>

                </div>
            </div>
            <div class="col list" ref="listwarp">
                <div class="itemwarp d-flex flex-column" ref="itemwarp">
                    <div class="top">
                        <!--第一项item 加 ref="item" -->
                        <div class="item" ref="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="//liangcang-material.alicdn.com/prod/upload/9b0b6931642e47e796c63788a6cf97fb.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">歌手·太戳心了</h4>
                            <h5 class="text-truncate">华晨宇公益新歌现场首唱</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="//liangcang-material.alicdn.com/prod/upload/f1298e8e0dc04db3b80f90e3372c4f7a.gif" alt="Card image cap">
                                <span class="pack_p_rb">02-26期</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">火星限定版·深井冰出没</h4>
                            <h5 class="text-truncate">杨迪爆笑cos妈妈：逮到了</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="//liangcang-material.alicdn.com/prod/upload/d41da00cf227448a85bd34c1ab9e7134.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事6</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事6</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事6</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事6</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事7</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事8</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事9</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事10</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事11</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                        <div class="item">
                            <div class="img-title">
                                <span class="label-exclusive">独播</span>
                                <img class="card-img-top cu-hand" src="https://liangcang-material.alicdn.com/feupload/h8w2vh5b8kjliz18tt91580574665507.jpg?x-oss-process=image/resize,w_290/interlace,1/quality,Q_80/sharpen,100" alt="Card image cap">
                                <span class="pack_p_rb">27集全</span>
                            </div>
                            <h4 class="text-truncate cu-text-blue">宝宝巴士·成长故事12</h4>
                            <h5 class="text-truncate">每集一个知识点</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "md",
        data(){
            return{
                leftOrRight:true
            }
        },
        methods:{
            moveItem(orientation='right'){
                let listwarp=this.$refs.listwarp.offsetWidth;
                let itemwarp=this.$refs.itemwarp;
                let item=this.$refs.item.offsetWidth;
                let hidenNum=Math.floor((itemwarp.offsetWidth-listwarp)/(item));
                let Distance=hidenNum*item;
                if(Distance<item){return;}
                itemwarp.style.transition='all 1.5s ease-in-out';
                if(orientation=='right'){
                    itemwarp.style.transform=`translateX(${-(Distance+3)}px)`;
                    this.leftOrRight=false;
                }else {
                    itemwarp.style.transform=`translateX(0)`;
                    this.leftOrRight=true;
                }
                //js监听窗口变化
                window.onresize =()=>{
                    itemwarp.style.transform=`translateX(0)`;
                    this.leftOrRight=true;
                }
            }
        },
        mounted() {
            // setTimeout(this.moveItem,1000)
        }
    }
</script>

<style scoped lang="scss">
.md-container{
    height: 100%;
    z-index: 10;
    position: relative;
    .leftRight{
        position: absolute;
        right: 0;
        top: -15%;
        color: #343a40;
        z-index: 15;
        .active{
            color: white;
        }
        span{
            line-height: 24px;
            text-align: center;
            display: inline-block;
            width: 24px;
        }
    }

    img{
        border-radius: 4px;
    }
    .img-scale:hover{
        transition: all 0.3s linear;
        transform: scale(1.08,1.08);
    }
    .row{
        .img-title{
            position: relative;
            border-radius: 4px;
            overflow: hidden;
            .pack_p_rb{
                position: absolute;
                right: 5px;
                z-index: 15;
                bottom: 5px;
                user-select:none;
                color: white;
            }
        }
        .large{
            max-width: 432px;min-width: 376px;
            padding-right: 0;
            .card{
                background-color: rgba(0,0,0,0);
                border: none;
            }
            .info_list{
                background-color: #25252b;
                padding: 25px 0 32px 16px;
                .cu-text-blue{
                    font-size: 16px;
                    line-height: 22px;
                    margin-bottom: 5px;
                    color: hsla(0,0%,100%,.87);
                }
                .subhead{
                    font-size: 14px;
                    color: hsla(0,0%,100%,.38);
                }
                a{
                    display: block;
                }
            }
        }
        .list{
            overflow: hidden;
            .itemwarp{
                min-width: 1332px;
            }
            .top,.bottom{
                white-space:nowrap;
            }
            .item{
                max-width: 222px;
                min-width: 180px;
                padding: 0 12px 0 0;
                border: none;
                display: inline-block;
                background-color: rgba(0,0,0,0);
                overflow: hidden;
                .card-img-top:hover{
                    transition: all 0.3s linear;
                    transform: scale(1.08,1.08);
                }
                .label-vip,.label-exclusive{
                    position: absolute;
                    border-radius: 0 0 2px 2px;
                    font-size: 12px;
                    line-height: 150%;
                    color: white;
                    right: 5px;
                    top: 5px;
                    padding: 0 5px;
                    user-select:none;
                    z-index: 15;
                }
                .label-vip{
                    background-color: #ebba73;
                }
                .label-exclusive{
                    background-color: #fc4273;
                }
                h4{
                    font-size: 16px;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    color: hsla(0,0%,100%,.87);
                }
                h5{
                    font-size: 13px;
                    color: #99a9bf;
                }
            }
        }
    }
}

@media (max-width: 1242px){
    .md-container .list .item{
        width: 195px;
    }
}
@media (min-width: 1245px) and (max-width: 1330px){
    .md-container .list .item{
        width: 190px;
    }
}
@media (min-width: 1335px) and (max-width: 1600px){
    .md-container .list .item{
        width: 205px;
    }
}
</style>